<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!-- 定义全局变量描述站点名 -->
<c:set var="ctx" value="${pageContext.servletContext.contextPath}" />
<! DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>职位管理 - 人事管理系统</title>
<link rel="icon" href="${ctx}/favicon.ico" type="image/ico">
<meta name="keywords" content="人事管理系统">
<meta name="description" content="人事管理系统">
<meta name="author" content="yinqi">
<link href="${ctx}/css/bootstrap.min.css" rel="stylesheet">
<link href="${ctx}/css/materialdesignicons.min.css" rel="stylesheet">
<link href="${ctx}/css/style.min.css" rel="stylesheet">
</head>

<body>
	<div class="lyear-layout-web">
		<div class="lyear-layout-container">
			<!--左侧导航-->
			<jsp:include page="../common/left.jsp"></jsp:include>
			<!--End 左侧导航-->

			<!--头部信息-->
			<jsp:include page="../common/header.jsp"></jsp:include>
			<!--End 头部信息-->

			<!--页面主要内容-->
			<main class="lyear-layout-content">
				<div class="container-fluid">

					<div class="row">
						<div class="col-lg-12">
							<div class="card">
								<div class="card-toolbar clearfix">
									<form class="form-inline pull-right"
										action="lyear_forms_elements.html" method="post"
										onsubmit="return false;">
										<div class="form-group">
											<input type="text" placeholder="请输入职位名称" class="form-control"
												name="jobname" id="jobname" />
										</div>
										<div class="form-group">
											<button class="btn btn-primary" type="button" id="search">搜索</button>
										</div>
									</form>
									<div class="toolbar-btn-action">
										<a class="btn btn-primary m-r-5" data-toggle="modal"
											data-target="#ajob"><i class="mdi mdi-plus"></i>添加</a> <a
											class="btn btn-danger" id="delAll"><i
											class="mdi mdi-window-close"></i>删除</a>
									</div>
								</div>
								<div class="card-body">

									<div class="table-responsive">
										<table class="table table-hover table-bordered">
											<thead>
												<tr>
													<th><label class="lyear-checkbox checkbox-primary">
															<input type="checkbox" id="check-all"><span></span>
													</label></th>
													<th>职位名称</th>
													<th>详细信息</th>
													<th>操作</th>
												</tr>
											</thead>
											<tbody id="tb">
											</tbody>
										</table>
									</div>

									<!-- 翻页按钮 -->
									<div class="toolbar-btn-action">
										<ul class="pagination" style="display: none;" id="ud">
											<li><a id="homePage" title="首页"><span>«</span></a></li>
											<li class="active"><a id="pre"><span>上一页</span></a></li>
											<li class="active"><a id="next"><span>下一页</span></a></li>
											<li><a id="lastPage" title="尾页"><span>»</span></a></li>
											<li>&nbsp;&nbsp;&nbsp;&nbsp;<input type="number"
												id="number" min="1" style="width: 40px; height: 30px;" />
												<button class="btn btn-primary" type="button" id="tz"
													style="height: 31px; margin-bottom: 6px;">Go</button></li>
											<li><div style="width: 10%;">&nbsp;</div></li>
											<li>&nbsp;当前为第<strong id="indexPage"></strong>页
											</li>
											<li>总共<strong id="total"></strong>页
											</li>
											<li>&nbsp;共查询到<strong id="sum"></strong>条数据
											</li>
										</ul>
									</div>

								</div>
							</div>
						</div>

					</div>

				</div>
			</main>
		</div>
	</div>

	<!--职位添加模态框  -->
	<div class="modal fade" id="ajob" tabindex="-1" role="dialog"
		aria-labelledby="exampleModalLabel">
		<div class="modal-dialog modal-sm" role="document">
			<div class="modal-content">
				<div class="modal-header"></div>
				<div class="modal-body">
					<div class="form-group has-feedback feedback-left">
						<input type="text" placeholder="请输入职位名称" class="form-control"
							name="j-name" id="j-name" /> <span
							class="mdi mdi-book-open form-control-feedback"
							aria-hidden="true"> </span>
					</div>
					<div class="form-group has-feedback feedback-left">
						<input type="text" placeholder="请输入职位描述" class="form-control"
							name="j-remark" id="j-remark" /> <span
							class="mdi mdi-account form-control-feedback" aria-hidden="true"></span>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal"
						id="closemodel">关闭</button>
					<button type="button" class="btn btn-primary" id="add">添加</button>
				</div>
			</div>
		</div>
	</div>

	<!--职位修改模态框  -->
	<div class="modal fade" id="modifyjob" tabindex="-1" role="dialog"
		aria-labelledby="exampleModalLabel">
		<div class="modal-dialog modal-sm" role="document">
			<div class="modal-content">
				<div class="modal-header"></div>
				<div class="modal-body">
					<div class="form-group has-feedback feedback-left">
						<input type="text" placeholder="" class="form-control"
							name="m-name" id="m-name" /> <span
							class="mdi mdi-clipboard-account form-control-feedback"
							aria-hidden="true"> </span>
					</div>
					<div class="form-group has-feedback feedback-left">
						<input type="text" placeholder="" class="form-control"
							name="m-remark" id="m-remark" /> <span
							class="mdi mdi-book-open form-control-feedback"
							aria-hidden="true"></span>
					</div>
					<input type="text" style="display: none;" name="m-id" id="m-id" />
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal"
						id="closeme">关闭</button>
					<button type="button" class="btn btn-primary" id="modify">修改</button>
				</div>
			</div>
		</div>
	</div>

	<script type="text/javascript" src="${ctx}/js/jquery.min.js"></script>
	<script type="text/javascript" src="${ctx}/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="${ctx}/js/perfect-scrollbar.min.js"></script>
	<script type="text/javascript" src="${ctx}/js/main.min.js"></script>
	<!--消息提示-->
	<script src="js/bootstrap-notify.min.js"></script>
	<script type="text/javascript" src="js/lightyear.js"></script>
	<script type="text/javascript">
	//定义全局变量
	var indexPage = $("#indexPage"); //当前页
	var total = $("#total"); //总页数
	var sum = $("#sum"); //总数据条数
	var jn = $("#jobname"); //职位名
	var $tb = $("#tb"); //表单主体
	var $ud = $("#ud"); //所有翻页按钮

	//点击首页点击事件
	$("#homePage").click(function() {
		lightyear.loading('show');
		//判断是否为首页
		if (indexPage.text() == 1) {
			lightyear.loading('hide');
			lightyear.notify('已经是首页了!', 'danger', 1000);
			return;
		} else {
			lightyear.loading('hide');
			indexPage.text(1);
			flushData();//刷新数据
		}
	});

	//点击尾页点击事件
	$("#lastPage").click(function() {
		lightyear.loading('show');
		//判断是否为尾页
		if (indexPage.text() == parseInt(total.text())) {
			lightyear.loading('hide');
			lightyear.notify('已经是尾页了!', 'danger', 1000);
			return;
		} else {
			lightyear.loading('hide');
			indexPage.text(parseInt(total.text()));
			flushData();//刷新数据
		}
	});

	//点击上一页按钮的单击事件
	$("#pre").click(function() {
		lightyear.loading('show');
		//判断是否为首页
		if (indexPage.text() - 1 < 1) {
			lightyear.loading('hide');
			lightyear.notify('已经是首页了!', 'danger', 1000);
			return;
		} else {
			lightyear.loading('hide');
			indexPage.text(parseInt(indexPage.text()) - 1);
			flushData();//刷新数据
		}
	});

	//点击下一页按钮的单击事件
	$("#next").click(function() {
		lightyear.loading('show');
		//判断是否为尾页
		if (indexPage.text() + 1 > total.text()) {
			lightyear.loading('hide');
			lightyear.notify('已经是尾页了!', 'danger', 1000);
			return;
		} else {
			lightyear.loading('hide');
			indexPage.text(parseInt(indexPage.text()) + 1);
			flushData();//刷新数据
		}
	});

	//跳转点击事件
	$("#tz").click(function() {
		lightyear.loading('show');
		//获取输入框的值
		var p = $("#number").val();
		//判断输入值是否符合
		if (p < 1 || p > parseInt(total.text())) {
			lightyear.loading('hide');
			lightyear.notify('输入错误,请重新输入!', 'danger', 1000);
			return;
		} else {
			lightyear.loading('hide');
			indexPage.text(p);
			flushData();//刷新数据
		}
	});

	//删除指定职位
	function del(jid){
		if(confirm('确认要删除吗?')){
			lightyear.loading('show');
			$.getJSON("delJob",
					{"jid":jid},
					function(data){
						if(data.msg=="success"){ //删除成功
							lightyear.loading('hide');
							lightyear.notify('删除成功~', 'success', 1000);
							//刷新最新的数据
							flushData();
							return;
						}else{ //该职位下存在员工
							lightyear.loading('hide');
							lightyear.notify('该职位下存在员工,已将该职位下的员工安排至闲置部!', 'warning', 1000);
							//刷新最新的数据
							flushData();
						}
					});
		};
	};
	
	//删除多个职位
	$("#delAll").click(function() {
		//判断是否有复选框被选中,只留下选中的元素
		var checkedBox = $("input:checkbox[name=ids]:checked");
		if (checkedBox.length < 1) {
			lightyear.notify('请选择一个要删除的职位!', 'warning', 1000);
		} else {
			var jobs = new Array();
			$("input:checkbox[name=ids]:checked").each(function () {
				jobs.push($(this).val());
			});
			if(confirm('确认要删除吗?')){
				lightyear.loading('show');
				$.getJSON("delJobs",
						{"jobs":JSON.stringify(jobs)},
						function(data){
							if(data.msg=="success"){ //删除成功
								lightyear.loading('hide');
								lightyear.notify('删除成功~', 'success', 1000);
								//刷新最新的数据
								flushData();
								return;
							}else{ //删除的职位有存在员工的情况
								lightyear.loading('hide');
								lightyear.notify('所删除的职位有存在员工的情况,已将其下的员工安排至闲置岗位!', 'warning', 1000);
								//刷新最新的数据
								flushData();
							}
						});
			}; 
		}
	});
	
	//添加职位模态框点击事件
		$("#add").click(function() { 
			var jname = $("#j-name").val();
			var jremark = $("#j-remark").val();
			add(jname,jremark);
			//清空填写的数据
			$("#j-name").val("");
			$("#j-remark").val("");
			$('#closemodel').click(); //关闭模态框
			return;
		});
	
	//添加职位
	function add(jname,jremark){
			lightyear.loading('show');
			$.getJSON("addJob",
					{"jname":jname,"jremark":jremark},
					function(data){
						if(data.msg=="success"){ //添加成功
							lightyear.loading('hide');
							lightyear.notify('添加成功~', 'success', 1000);
							//刷新最新的数据
							flushData();
							return;
						}else if(data.msg=="fail"){ //存在空数据
							lightyear.loading('hide');
							lightyear.notify('请勿输入空数据!', 'danger', 1000);
							//刷新最新的数据
							flushData();
							return;
						}else{ //职位重复
							lightyear.loading('hide');
							lightyear.notify('请勿重复添加相同的职位!', 'danger', 1000);
							//刷新最新的数据
							flushData();
						}
					});
	};
	
	//修改指定职位模态框
	function modifyJob(id,ojname,oremark){
			//将旧数据写入输入框
			$("#m-name").attr( "placeholder" , ojname);
			$("#m-remark").attr( "placeholder" , oremark);
			$("#m-id").val(id);
	};
	
	//修改按钮点击事件
	$("#modify").click(function() { 
		var id = $("#m-id").val();
		var njname = $("#m-name").val();
		var remark = $("#m-remark").val();
		modify(id,njname,remark); //修改
		//清空填写的数据
		$("#m-name").val("");
		$("#m-remark").val("");
		$('#closeme').click(); //关闭模态框
		return;
		});
	
	//修改指定职位
	function modify(id,njname,remark){
			lightyear.loading('show');
			$.getJSON("modifyJob",
					{"id":id,"njname":njname,"remark":remark},
					function(data){
						if(data.msg=="success"){ //修改成功
							lightyear.loading('hide');
							lightyear.notify('修改成功~', 'success', 1000);
							//刷新最新的数据
							flushData();
							return;
						}else if(data.msg=="fail"){ //存在空数据
							lightyear.loading('hide');
							lightyear.notify('请勿输入空数据!', 'danger', 1000);
							//刷新最新的数据
							flushData();
							return;
						}else if(data.msg=="repeat"){ //存在空数据
							lightyear.loading('hide');
							lightyear.notify('已有该职位!', 'danger', 1000);
							//刷新最新的数据
							flushData();
						}
					});
	};
	
	//搜索点击事件
	$("#search").on("click", function() {
		lightyear.loading('show');
		//重置当前页的显示
		indexPage.text(1);
		flushData();
		lightyear.loading('hide');
		//清空搜索输入的数据
		jn.val("");
	});
	
	//刷新最新数据的
	function flushData() {
		$.ajax({
					url : "getJobs?pageNo=" + (indexPage.text() ? indexPage.text() : 1) + "&jobname=" + jn.val(), //提交到服务器地址
					type : "post", //提交方式
					dataType : "json", //表示服务器端返回的数据一定要是json数据
					success : function(data) { //成功之后自动执行的回调函数
						if (data.msg == "success") { //说明是成功的
							//把旧数据清空
							$tb.html("");
							$.each(data.list,
											function(index, job) {
												$tb.append('<tr><td><label class="lyear-checkbox checkbox-primary"><input type="checkbox" name="ids" value=" ' + job.jID + '"><span></span></label></td><td>'
																+ job.jName
																+ '</td><td>'
																+ job.jRemark
																+ '</td><td><div class="btn-group"><a class="btn btn-xs btn-default" title="修改" data-toggle="modal" data-target="#modifyjob" onclick="modifyJob(\'' + job.jID + '\'\, \'' + job.jName + '\'\, \'' + job.jRemark + '\')"><i class="mdi mdi-pencil"></i></a><a class="btn btn-xs btn-default" onclick="del(\'' + job.jID + '\')" title="删除" data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a></div></td></tr>');
												$ud.show(); //将页面按钮显示出来
												var ph = data.ph; //获取页面辅助类对象
												//进行赋值
												indexPage
														.text(ph.pageIndex);
												total
														.text(ph.totalPageSum);
												sum
														.text(ph.totalRecordSum);
											});
						};
						//如果查询的数据为空,清空之前的全部数据,并且隐藏所有翻页按钮,判断是否搜索到数据
						if(data.list == ''){ 
							//清空数据
							$tb.html("");
							//清空页数显示
							indexPage.text("");
							total.text("");
							sum.text("");
							$ud.hide(); //隐藏按钮
							lightyear.notify('未搜索到您需要的数据!', 'danger', 1000);
						}
					},
					error : function() { //出错时会自动执行的回调函数
						lightyear.notify('数据查询出现异常!', 'danger', 1000);
					}
				});
	};
	</script>
</body>
</html>
